{extend name="public/base" /}
{block name="css"}
<style>
  .container-fluid {
    padding: 10px;
  }

  .cover {
    width: 100%;
  }

  .designer {
    border: 1px solid #999999;
    margin: 25px 0 15px;
    padding: 20px 0;
  }

  .content-container {
    border: 1px solid #999999;
    margin: 20px 0 15px;
    padding: 15px;
  }

  section > img, p > img, div > img, span > img {
    max-width: 100% !important;
  }
</style>
{/block}
{block name="main"}
<section class="container-fluid">
  {eq name="$tdk['title']" value="案例详情-致美优家"}
  <div class="d-flex flex-column" style="padding: 30% 0;text-align: center">
    <img style="width: 18%;margin: 0 auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/empty.svg" alt="案例详情不存在" />
    <p style="color: #999999">案例详情不存在(´･_･`)</p>
  </div>
  {else/}
  <img class="cover" alt="{$case.building}" src="{$case.cover}"/>

  <div class="designer">
    <div style="font-size: 17px;text-align: center;font-weight: 400;">{$case.building} | {$case.case_style|getStyle} |
      {$case.housing} | {$case.area}㎡
    </div>
    <div style="display: flex;padding: 20px 30px">
      <div><img style="width: 90px" alt="" src="{$case.avatar}"/></div>
      <div style="margin-left: 15px;display: flex; flex-direction: column; justify-content: space-between">
        <div style="font-weight: bold;font-size: 16px">{$case.nick_name|default=$case.name} - {$case.type|getDesignerType}</div>
        <div style="color: #888; font-size: 12px">理念：{$case.intro|default="-"}</div>
        <div style="color: #888; font-size: 12px">擅长风格：{$case.style|default="-"}</div>
      </div>
    </div>
    <div style="display: flex;margin: 0 auto;width: 80%;justify-content: center">
      <div style="
background: #93412C;
padding: 5px 25px;
font-size: 14px;
border-radius: 15px;text-align: center;color: #FFFFFF;margin-right: 20px" onclick="$('#appointment-title').text('预约设计师');window.page_position='预约设计师-{$case.nick_name}';showAppointmentLayer();">找TA设计
      </div>
      <div style="
border: 1px solid #93412C;
background: #FFFFFF;
padding: 5px 25px;
font-size: 14px;
border-radius: 15px;text-align: center;
color: #93412C;margin-left: 20px;
" class="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')">在线咨询
      </div>
    </div>
  </div>

  <div style="color: #333333"><a href="{$Request.root.true}" style="color: #333333">首页</a> > <a href="{$Request.root}/cases.html" style="color: #333333">服务案例</a> > {$case.building}</div>

  <div class="content-container">
    <div style="color: #333333; font-size: 18px; font-weight: bold">{$case.title}</div>
    <div style="display: flex;justify-content: space-between;color: #999999;margin-top: 8px;font-size: 13px">
      <div>时间：{$case.create_time}</div>
      <div><img style="width: 16px;margin-right: 5px" src="https://u-res.oss-cn-chengdu.aliyuncs.com/web/ZMYJ/assets/img/liulanliang.png" />{$case.view_count}次</div>
    </div>
    <hr />
    <div class="content">{$case.content|raw}</div>
  </div>

  <img style="width: 90%;margin: 10px 0 20px 5%" alt="" src="https://u-res.oss-cn-chengdu.aliyuncs.com/web/ZMYJ/assets/img/code.png"/>
  {/eq}
</section>
{/block}
{block name="js"}
<script>
  $('#nav').find('ul > li').eq(3).addClass('nav-active');
  $("#nav").scrollLeft(65 * 3);

  //$('p > span > img, p > img, section > section > img, section > img').removeAttr('width height style');

  $('.content > section > img').removeAttr('width height style');

  const imgDom = document.querySelectorAll('img');
  for (let i = 0; i < imgDom.length; i++) {
    if (imgDom[i].src.match("jpg")) {
      imgDom[i].src = `${imgDom[i].src}?x-oss-process=image/format,jpg/interlace,1`;
    }
  }
</script>
{/block}